<template>
  <div>
    <el-row>
      <el-form>
        <el-form-item>
          <label for="">商户名称</label>
          <el-select filterable>
            <el-option></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <label for="">支付时间</label>
          <el-date-picker type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
        </el-form-item>
      </el-form>
      <el-button type="text" size="small" class="btn30 btn-search" icon="el-icon-search">查询</el-button>
      <el-button type="primary" size="small" icon="el-icon-download" class="btn30" @click="handleDownload">下载数据</el-button>
    </el-row>
    <el-row>
      <el-table :data="total_data" size="small">
        <el-table-column label="商户名称" prop="name" align="center"></el-table-column>
        <el-table-column label="门店名称" prop="shop_name" align="center"></el-table-column>
        <el-table-column label="商户打印名称" prop="print_name" align="center"></el-table-column>
        <el-table-column label="有效交易金额" prop="money" align="center"></el-table-column>
        <el-table-column label="付款状态" prop="state" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="show(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="40" layout="total, prev, pager, next, jumper"  class="fr mt20"></el-pagination>
    </el-row>
    <el-row>
      <el-dialog title="订单汇总详情" :visible.sync="dialog" width="450px">
        <ul>
          <li>商户名称：</li>
          <li>开始时间：</li>
          <li>门店名称：</li>
          <li>结束时间：</li>
          <li>商户打印名称：</li>
        </ul>
        <el-table size="small" :data="dialog_data">
          <el-table-column label="支付通道" prop="pay" align="center"></el-table-column>
          <el-table-column label="有效订单金额（元）" prop="money" align="center"></el-table-column>
          <el-table-column label="有效订单笔数" prop="num" align="center"></el-table-column>
        </el-table>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialog: false,
      total_data: [
        {
          name: '2313',
          shop_name: '546',
          print_name: '165',
          money: '646.5',
          state: '633'
        }
      ],
      dialog_data: [
        {
          pay: '支付宝',
          money: '331316',
          num: '164'
        }
      ]
    }
  },
  methods: {
    show(id) {
      this.dialog = true
    },
    handleDownload() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/vendor/Export2Excel')
        const tHeader = ['订单号', '商户名称', '门店名称', '商户打印名称', '交易金额（有效）', '付款状态', '支付通道', '支付时间'] // excel 表格头
        const filterVal = ['id', 'name', 'shop_name', 'print_name', 'money', 'state', 'pay', 'time'] // excel key值
        const list = this.total_data // 数据  Array
        const data = this.formatJson(filterVal, list) // 自行洗数据 按序排序的一个array数组
        export_json_to_excel(tHeader, data, '订单数据')
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row{
  margin-top: 20px;
  .el-form{
    display: inline-block;
    vertical-align: top;
    .el-form-item{
      display: inline-block;
     vertical-align: middle;
      margin: 0;
    }
  }
  .btn30{
    padding: 0;
    text-align: center;
    vertical-align: top;
    margin-top: 3px;
  }
  /deep/ .el-dialog{
    .el-dialog__header{
      border-bottom: 1px solid #ddd;
    }
    .el-dialog__body{
      padding: 10px 20px;
      font-size: 12px;
      ul{
        margin: 0;
        padding: 0;
        li{
          display: inline-block;
          width: 45%;
        }
      }
    }
  }
}
</style>
